<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>可以拖动的div</title>
	</head>
	<style>
		.square {
			width: 200px;
			height: 200px;
			background-color: #ddd;
			border: 1px solid #999;
			resize: both;
			overflow: auto;
			cursor: move;
		}
	</style>
	<body>
		 <div class="square"></div>
		 <script>
	
		 
		const handle = document.querySelector(".square");

        let isResizing = false;
        let initialWidth;
        let initialHeight;
        let initialX;
        let initialY;

        handle.addEventListener("mousedown", (e) => {
            isResizing = true;
            initialWidth = handle.offsetWidth;
            initialHeight = handle.offsetHeight;
            initialX = e.clientX;
            initialY = e.clientY;
            e.preventDefault();
        });

        document.addEventListener("mousemove", (e) => {
            if (!isResizing) return;
            const width = initialWidth + (e.clientX - initialX);
            const height = initialHeight + (e.clientY - initialY);
            handle.style.width = width + "px";
            handle.style.height = height + "px";
        });

        document.addEventListener("mouseup", () => {
            isResizing = false;
        });
		 </script>
	</body>
</html>